<template>
  <div class="content-box salaryPayment-box">
    <nav-title title="薪资发放审批" :routerLink="routerLink"/>
    <!-- 发起人基本信息 -->
    <div class="regulations-box">
      <div class="title">发起人基本信息</div>
      <div class="information">
        <p class="info-cell clearfix">
          <label class="label">发起人姓名</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.cWfName}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">发起人部门</label>
          <span class="value">{{allInfo.cWfDeptdescr}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">发起人岗位</label>
          <span class="value">{{allInfo.cWfJcDescr}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">联系方式</label>
          <span class="value">{{allInfo.cWfPhone}}</span>
        </p>
      </div>
    </div>
    <!-- 流程信息 -->
    <div class="regulations-box">
      <div class="title">流程信息</div>
      <div class="salaryPayment-table-one-title">{{allInfo.descr}}</div>
      <table class="salaryPayment-table-one">
        <thead>
          <tr>
            <th></th>
            <th>人数</th>
            <th>应发总额(元)</th>
            <th>实发总额(元)</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in allInfo.monthData">
            <td>{{item.title}}</td>
            <td>{{item.peopleNum}}</td>
            <td>{{item.totalMoney}}</td>
            <td>{{item.finalMoney}}</td>
          </tr>
        </tbody>
      </table>
      <div class="information">
        <div class="info-cell clearfix">
          <label class="label">附件信息</label>
          <!-- <span class="value">
            <span class="value" v-for="item in allInfo.wfFiles">
              <a :href=item.fileUrl>{{item.originalName}}</a>
            </span>
          </span> -->
          <!-- <div class="info-label">附件</div> -->
          <div class="value">
            <div class="file-list" v-for="item in allInfo.wfFiles">
              <div class="filname">
                <span class="iplodimg">
                  <a v-if="(item.fileType == 'jpg') || (item.fileType == 'png') || (item.fileType == 'pdf') || (item.fileType=='txt') || (item.fileType=='jpeg')" href="javascript:;" @click="showItemClick(item)">{{item.originalName}}</a>
                  <!-- <a v-else="" href="javascript:;" @click="downloadFile(item.fileUrl)">{{item.originalName}}</a> -->
                  <a v-else="" href="javascript:;" @click="openApp(item.fileUrl, item.androidUrl)">{{item.originalName}}</a>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="regulations-box">
      <div class="info-label">按发薪单位统计</div>
      <table class="salaryPayment-table-two">
        <thead>
          <tr>
            <th>发薪单位</th>
            <th>人数</th>
            <th>应发</th>
            <th>实发</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in allInfo.compData">
            <td>{{item.title}}</td>
            <td>{{item.peopleNum}}</td>
            <td>{{item.totalMoney}}</td>
            <td>{{item.finalMoney}}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <show-annex :option="showItem" v-if="showDetail" :hiddenImg="hiddenImg"></show-annex>

    <!-- 流程图 -->
    <div class="regulations-box">
      <div class="title">流程图</div>
      <v-flow-charts :transNum="cTransactionNbr" :loginOprid="loginOprid"></v-flow-charts>
    </div>
    <!-- 审批意见 -->
    <div class="regulations-box" v-if="approved == '0'">
      <div class="info-label">审批意见</div>
      <div class="info-label-text">
        <!-- <textarea rows="5" placeholder="请填写..." ></textarea> -->
        <textarea v-if="approved == '0'" placeholder="请在这里输入..." rows="5" v-model="cComments"></textarea>
        <textarea v-else="" readonly rows="5" v-model="cComments"></textarea>
      </div>
    </div>

    <div style="height: 50px"></div>
    <!-- 底部按钮 -->
    <div v-if="approved == '0'">
      <div class="fix-btn">
        <button v-if="allInfo.cApprovalSw == 'Y'" class="blue-btn" @click="doOperate('Approval')">同意</button>
        <button v-if="allInfo.cAddSw == 'Y'" class="white-btn" @click="doOperate('AddStep')">
          <span>+</span> 加签</button>
        <span v-if="allInfo.cPushbackAllSw == 'Y'" class="reject-main">
          <button class="yellow-btn" @click="popGroup">驳回</button>
          <transition name="slide-fade">
            <span v-if="showGroup" class="reject-group">
              <button class="yellow-btn" @click="doOperate('PushAllback')">重走</button>
              <button class="yellow-btn" @click="doOperate('Pushback')">不重走</button>
            </span>
          </transition>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import { dateFormat } from "vux";
import { getPayInfo, getCompensateApprove } from "../../api/api";
import operationBtn from "./common/operationBtn";
import vFlowCharts from "../formalStaff/common/flowChart";
import { json2Form, publicUrl } from "../../util/http";

export default {
  components: {
    name: "SalaryPayment",
    operationBtn,
    dateFormat,
    vFlowCharts
  },

  created() {
    this.cTransactionNbr = this.$route.query.cTransactionNbr;
    this.approved = this.$route.query.approved;
    this.loginOprid = this.$route.query.token;
    if (this.$route.query.approved == "0") {
      this.routerLink = "/todoList/todo";
    } else if (this.$route.query.approved == "1") {
      this.routerLink = "/todoList/done";
    } else {
      this.routerLink = "MyApplication";
    }
    this.getData();
  },
  mounted() {},
  data() {
    return {
      publicUrl: publicUrl,
      fileList: [],
      showItem: {},
      showDetail: false,

      routerLink: "",
      allInfo: {},
      aptWorks: [],
      aptEdus: [],
      cComments: "",
      authFileds: [],
      showGroup: false
    };
  },
  methods: {
    showItemClick(item) {
      this.showItem = item;
      this.showDetail = true;
    },
    hiddenImg() {
      this.showDetail = false;
    },
    openApp(url, androidUrl) {
      const u = navigator.userAgent;
      const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isAndroid) {
        webview.openAttachmentWebView(
          `${this.publicUrl}${androidUrl}`,
          this.$store.state.oprId,
          ""
        ); // eslint-disable-line
      } else {
        window.location.href = `myapp:${this.publicUrl}${url}`;
      }
    },

    getData() {
      this.$vux.loading.show();
      getPayInfo({ cTransactionNbr: this.cTransactionNbr, loginOprid: this.loginOprid })
        .then(res => {
          this.$vux.loading.hide();
          if (res && res.retCode === "000000") {
            this.allInfo = res.retData;
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    doOperate(actionType) {
      if (actionType == "PushAllback" || actionType == "Pushback") {
        this.showGroup = !this.showGroup;
      }
      window.event.cancelBubble = true;

      //同意审批
      let cAdjuSalary = "",
        annualSalary = "";
      this.authFileds.map(item => {
        if (item.fieldKey == "cAdjuSalary") cAdjuSalary = item.fieldValue;
        if (item.fieldKey == "annualSalary") annualSalary = item.fieldValue;
      });
      let params = {
        c_WF_TYPE: this.allInfo.cWfType,
        c_TRANSACTION_NBR: this.cTransactionNbr,
        c_ACTION_TYPE: actionType,
        c_COMMENTS: this.cComments
      };

      if (actionType == "AddStep") {
        //加签需要跳转至加签页面，并携带参数
        this.$router.push({
          name: "Visa",
          params: {
            c_TRANSACTION_NBR: this.cTransactionNbr,
            c_WF_TYPE: this.allInfo.cWfType,
            c_COMMENTS: this.cComments,
            c_Link: "SalaryPayment"
          }
        });
      } else {
        this.$vux.confirm.show({
          title: "提示",
          content: "您确认要同意？",
          onConfirm: () => {
            getCompensateApprove(json2Form(params))
              .then(res => {
                if (res && res.retCode === "000000") {
                  this.$router.push("/todoList/todo");
                } else {
                  this.$vux.alert.show({
                    title: "提示",
                    content: res.retMsg
                  });
                }
              })
              .catch(res => {
                this.$vux.alert.show({
                  title: "警告",
                  content: "网络异常，请稍后重试"
                });
              });
          }
        });
      }
    },
    popGroup() {
      this.showGroup = !this.showGroup;
      window.event.cancelBubble = true;
    }
  }
};
</script>

<style type="text/scss" lang="scss">
@import "../../styles/staff.scss";
@import "../../styles/rejectmain.scss";
.salaryPayment-box {
  table {
    width: 100%;
  }
  .salaryPayment-table-one-title {
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0;
  }
  .salaryPayment-table-one {
    background-color: #f8f8f8;
    th,
    td {
      line-height: 40px;
      border-right: 3px solid #fff;
      border-bottom: 3px solid #fff;
    }
  }
  .salaryPayment-table-two {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    th,
    td {
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      padding: 10px;
    }
    th:first-child {
      width: 40%;
    }
  }
}
</style>
